import React, { useState, useEffect, useRef } from 'react'
import { useNavigate, useParams, useLocation } from 'react-router-dom'
import { Button, Toast, Tabs, Swiper } from 'antd-mobile'
import { LeftOutline, RightOutline, FileOutline } from 'antd-mobile-icons'
import { SwiperRef } from 'antd-mobile/es/components/swiper'
import './coupon.scss'

const tabItems = [
    { key: '1', title: '未使用' },
    { key: '2', title: '已使用' },
    { key: '3', title: '已过期' },
]
export default function Coupon() {
    const navigate = useNavigate()
    const [tab, setTab] = useState('全部')

    const swiperRef = useRef<SwiperRef>(null)
    const [activeIndex, setActiveIndex] = useState(0)
    return (
        <div>
            <div className='coupon_back'>
                <Button onClick={() => navigate(-1)}><LeftOutline /></Button>
                我的优惠劵
            </div>
            <div className='coupon_nav'>
                <Tabs
                    activeKey={tabItems[activeIndex].key}
                    onChange={key => {
                        const index = tabItems.findIndex(item => item.key === key)
                        setActiveIndex(index)
                        swiperRef.current?.swipeTo(index)
                    }}
                >
                    {tabItems.map(item => (
                        <Tabs.Tab title={item.title} key={item.key} />
                    ))}
                </Tabs>
            </div>
            <div className='coupon_main'>
                <div className='noCoupon'>
                    <Swiper
                        direction='horizontal'
                        loop
                        indicator={() => null}
                        ref={swiperRef}
                        defaultIndex={activeIndex}
                        onIndexChange={index => {
                            setActiveIndex(index)
                        }}
                    >
                        <Swiper.Item>
                            <i><FileOutline /></i>
                            <h1>还没有优惠劵</h1>
                        </Swiper.Item>
                        <Swiper.Item>
                            <i><FileOutline /></i>
                            <h1>还没有优惠劵</h1>
                        </Swiper.Item>
                        <Swiper.Item>
                            <i><FileOutline /></i>
                            <h1>还没有优惠劵</h1>
                        </Swiper.Item>
                    </Swiper>
                </div>
            </div>



        </div>
    )
}
